import { configCurryFilter } from '@/dictionaries/filter'
import { DoType } from '@/interfaces'
import dayjs from 'dayjs'
import { PropType, defineComponent, reactive, ref, toRaw, watch } from 'vue'
import { useRouter } from 'vue-router'
import { UserState, } from '../uilts'
import { useRequest } from '@/hooks'
import { defaultParams } from '@/utils'
import { clone } from 'ramda'
import { isTrue } from '@/utils/tools'
const props = {
    visible: {
        type: Boolean as PropType<boolean>,
        required: true,
    },
    dataSource: {
        type: Object as PropType<UserState>,
    },
} as const
export default defineComponent({
    props,
    name: 'SeeIndex',
    emits: ['cancel'],
    setup(props, { emit }) {
        const $router = useRouter()
        const pageState = reactive({
            loading: false,
            formData: {} as UserState,
        })
        watch(
            () => props.visible,
            async (visible) => {
                if (visible) {
                    pageState.formData = {
                    }
                    if (props.dataSource?.id) {
                        const { data, success } = await API.server.user.adminGetUserInfo.request({ id: Number(props.dataSource.id) })
                        if (success) {
                            pageState.formData = data ?? {}
                        }
                    }
                }
            }
        )
        function cancel() {
            pageState.formData = {}
            pageState.loading = false
            emit('cancel')
        }
        return () => <a-modal
            title='查看用户信息'
            visible={props.visible}
            onCancel={cancel}
            footer={null}
            centered
            confirmLoading={pageState.loading}
            width="70%"
        >
            <a-descriptions bordered >
                <a-descriptions-item label="用户id">{pageState.formData.id}</a-descriptions-item>
                <a-descriptions-item label="用户昵称">{pageState.formData.username}</a-descriptions-item>
                <a-descriptions-item label="头像">{
                    isTrue(pageState.formData.avatar) ? (
                        <a-image width={50} src={pageState.formData.avatar} />
                    ) : '-'
                }</a-descriptions-item>
                <a-descriptions-item label="用户状态">{configCurryFilter('userStatus', pageState.formData?.status as number)}</a-descriptions-item>
                <a-descriptions-item label="手机号码">{pageState.formData.mobile}</a-descriptions-item>
            </a-descriptions>
        </a-modal>
    }
})